<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>尚硅谷书城首页</title>
  <link rel="stylesheet" th:href="@{/css/minireset.css}"/>
  <link rel="stylesheet" th:href="@{/css/common.css}"/>
  <link rel="stylesheet" th:href="@{/css/iconfont.css}"/>
  <link rel="stylesheet" th:href="@{/css/index.css}"/>
  <link rel="stylesheet" th:href="@{/css/swiper.min.css}"/>
  <script th:src="@{/script/vue.min.js}"></script>
  <script th:src="@{/script/axios.min.js}"></script>
  <script>
      window.onload = function () {
          let vue = new Vue({
              el: "#app",
              data: {
                  books: {},
                  current: '1',
                  size: '',
                  total: '',
                  lastPage: '3',
                  toPage: ''
              },
              methods: {
                  addCart: function (id) {
                      axios({
                          method: "post",
                          url: "/bookstore/addCart",
                          params: {
                              id: id,
                          }
                      }).then(response => {
                          if (response.data.code == 1) {
                              alert(response.data.message);
                              window.location.href = "http://localhost:8080/bookstore/cart";
                          } else {
                              alert(response.data.message);
                          }
                      }).catch(reason => {
                          console.log(reason.data);
                      });
                  },
                  selectBook: function (current) {
                      axios({
                          method: "get",
                          url: "/bookstore/selectbook/" + current,
                      }).then(response => {
                          this.books = response.data.records;
                      });
                  },
              },
              created: function () {
                  axios({
                      method: "get",
                      url: "/bookstore/selectbook/1",
                  }).then(response => {
                      vue.books = response.data.records;
                      vue.size = response.data.size;
                      vue.total = response.data.total;
                  });
              }
          })
      };
  </script>
</head>
<body>
<div id="app">
  <div class="topbar">
    <div class="w">
      <div class="topbar-left">
        <i>送至:</i>
        <i>北京</i>
        <i class="iconfont icon-ai-arrow-down"></i>
      </div>
      <!--登录前风格-->
      <div class="topbar-right" th:if="${session.user==null}">
        <a th:href="@{/user/login}" class="login">登录</a>
        <a th:href="@{/user/regist}" class="register">注册</a>
        <a href="#" class="cart iconfont icon-gouwuche">购物车
          <div class="cart-num">0</div>
        </a>
        <a href="manager/book_manager.html" class="admin">后台管理</a>
      </div>
      <!--登录后风格-->
      <div class="topbar-right" th:unless="${session.user==null}">
        <span>欢迎你<b th:text="${session.user.uname}">张总</b></span>
        <a th:href="@{/user/logout}" class="register">注销</a>
        <a th:href="@{/cart}" class="cart iconfont icon-gouwuche">购物车
          <div class="cart-num" th:text="${totalCartCount}"></div>
        </a>
        <a th:href="@{/manager}" class="admin">后台管理</a>
      </div>
    </div>
  </div>
  <div class="header w">
    <a href="#" class="header-logo"></a>
    <div class="header-nav">
      <ul>
        <li><a href="#">Java</a></li>
        <li><a href="#">前端</a></li>
        <li><a href="#">小说</a></li>
        <li><a href="#">文学</a></li>
        <li><a href="#">青春文学</a></li>
        <li><a href="#">艺术</a></li>
        <li><a href="#">管理</a></li>
      </ul>
    </div>
    <div class="header-search">
      <input type="text" placeholder="十万个为什么"/>
      <button class="iconfont icon-search"></button>
    </div>
  </div>
  <div class="banner w clearfix">
    <div class="banner-left">
      <ul>
        <li>
          <a href="">
            <span>文学 鉴赏</span>
            <i class="iconfont icon-jiantou"></i></a>
        </li>
        <li>
          <a href="">
            <span>社科 研究</span>
            <i class="iconfont icon-jiantou"></i></a>
        </li>
        <li>
          <a href="">
            <span>少儿 培训</span>
            <i class="iconfont icon-jiantou"></i></a>
        </li>
        <li>
          <a href="">
            <span>艺术 赏析</span>
            <i class="iconfont icon-jiantou"></i></a>
        </li>
        <li>
          <a href="">
            <span>生活 周边</span>
            <i class="iconfont icon-jiantou"></i></a>
        </li>
        <li>
          <a href="">
            <span>文教 科技</span>
            <i class="iconfont icon-jiantou"></i></a>
        </li>
        <li>
          <a href="">
            <span>热销 畅读</span>
            <i class="iconfont icon-jiantou"></i></a>
        </li>
      </ul>
    </div>
    <div class="banner-right">
      <div class="swiper-container">
        <ul class="swiper-wrapper">
          <li class="swiper-slide">
            <img th:src="@{/uploads/banner4.jpg}" alt="">
            <!-- <div class="banner-img"></div> -->
          </li>
          <li class="swiper-slide">
            <img th:src="@{/uploads/banner5.jpg}" alt="">
            <!-- <div class="banner-img"></div> -->
          </li>
          <li class="swiper-slide">
            <img th:src="@{/uploads/banner6.jpg}" alt="">
            <!-- <div class="banner-img"></div> -->
          </li>
        </ul>
        <div class="swiper-button-prev"></div>

        <div class="swiper-button-next"></div>

        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
  <div class="books-list ">
    <div class="w">
      <div class="list">
        <div class="list-header">
          <div class="title">图书列表</div>
          <div class="price-search">
            <span>价格:</span>
            <input type="text">
            <span>-元</span>
            <input type="text">
            <span>元</span>
            <button>查询</button>
          </div>
        </div>
        <div class="list-content">
          <div class="list-item" v-for="book in books">
            <img v-bind:src="'/bookstore/uploads/'+book.bookimg" alt="">
            <p>书名:{{book.bookname}}</p>
            <p>作者:{{book.author}}</p>
            <p>价格:￥{{book.price}}</p>
            <p>销量:{{book.salecount}}</p>
            <p>库存:{{book.bookcount}}</p>
            <button @click="addCart(book.id)">加入购物车</button>
          </div>
        </div>
      </div>
      <div class="list-footer">
        <div><a @click.prevent="selectBook(1)">首页</a></div>
        <div><a @click.prevent="selectBook(current--)">上一页</a></div>
        <ul>
          <li class="active"><a @click.prevent="selectBook(1)">1</a></li>
          <li><a @click.prevent="selectBook(2)">2</a></li>
          <li><a @click.prevent="selectBook(3)">3</a></li>
        </ul>
        <div><a @click.prevent="selectBook(current++)">下一页</a></div>
        <div><a @click.prevent="selectBook(lastPage)">末页</a></div>
        <span>共{{lastPage}}页</span>
        <span>{{total}}条记录</span>
        <span>到第</span>
        <input type="text" v-model="toPage">
        <span>页</span>
        <button @click.prevent="selectBook(toPage)">确定</button>
      </div>
    </div>
  </div>

</div>
<div class="cate w">
  <div class="list">
    <a href="" class="list-item">
      <i class="iconfont icon-java"></i>
      <span>java</span>
    </a>
    <a href="" class="list-item"><i class="iconfont icon-h5"></i>h5</a>
    <a href="" class="list-item"><i class="iconfont icon-python"></i>python</a>
    <a href="" class="list-item"><i class="iconfont icon-tianchongxing-"></i>pm</a>
    <a href="" class="list-item"><i class="iconfont icon-php_elephant"></i>php</a>
    <a href="" class="list-item"><i class="iconfont icon-go"></i>go</a>
  </div>
  <a href="" class="img">
    <img th:src="@{/uploads/cate4.jpg}" alt=""/>
  </a>
  <a href="" class="img">
    <img th:src="@{/uploads/cate5.jpg}" alt=""/>
  </a>
  <a href="" class="img">
    <img th:src="@{/uploads/cate6.jpg}" alt=""/>
  </a>
</div>
<div class="books">
  <div class="w">
    <div class="seckill">
      <div class="seckill-header">
        <div class="title">图书秒杀</div>
        <!-- <i class="iconfont icon-huanyipi"></i> -->
      </div>
      <div class="seckill-content">
        <a href="" class="tip">
          <h5>距离结束还有</h5>
          <i class="iconfont icon-shandian"></i>
          <div class="downcount">
            <span class="time">00</span>
            <span class="token">:</span>
            <span class="time">00</span>
            <span class="token">:</span>
            <span class="time">00</span>
          </div>
        </a>
        <a href="" class="books-sec">
          <img th:src="@{/uploads/congwanqingdaominguo.jpg}" alt="">
          <p>从晚晴到民国</p>
          <div>
            <span class="cur-price">￥28.9</span>
            <span class="pre-price">￥36.5</span>
          </div>
          <button>立即购买</button>
        </a>
        <a href="" class="books-sec">
          <img th:src="@{/uploads/cyuyanrumenjingdian.jpg}" alt="">
          <p>c语言入门经典</p>
          <div>
            <span class="cur-price">￥55.9</span>
            <span class="pre-price">￥68.5</span>
          </div>
          <button>立即购买</button>
        </a>
        <a href="" class="books-sec">
          <img th:src="@{/uploads/fusang.jpg}" alt="">
          <p>扶桑</p>
          <div>
            <span class="cur-price">￥30.9</span>
            <span class="pre-price">￥47.5</span>
          </div>
          <button>立即购买</button>
        </a>
        <a href="" class="books-sec">
          <img th:src="@{/uploads/geihaizideshi.jpg}" alt="">
          <p>给孩子的诗</p>
          <div>
            <span class="cur-price">￥18.9</span>
            <span class="pre-price">￥25.5</span>
          </div>
          <button>立即购买</button>
        </a>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="bottom">
  <div class="w">
    <div class="top">
      <ul>
        <li>
          <a href="">
            <img th:src="@{/img/bottom1.png}" alt="">
            <span>大咖级讲师亲自授课</span>
          </a>
        </li>
        <li>
          <a href="">
            <img th:src="@{/img/bottom.png}" alt="">
            <span>课程为学员成长持续赋能</span>
          </a>
        </li>
        <li>
          <a href="">
            <img th:src="@{/img/bottom2.png}" alt="">
            <span>学员真是情况大公开</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="content">
      <dl>
        <dt>关于尚硅谷</dt>
        <dd>教育理念</dd>
        <!--<dd>名师团队</dd>
        <dd>学员心声</dd>-->
      </dl>
      <dl>
        <dt>资源下载</dt>
        <dd>视频下载</dd>
        <!--<dd>资料下载</dd>
        <dd>工具下载</dd>-->
      </dl>
      <dl>
        <dt>加入我们</dt>
        <dd>招聘岗位</dd>
        <!--<dd>岗位介绍</dd>
        <dd>招贤纳师</dd>-->
      </dl>
      <dl><!---->
        <dt>联系我们</dt>
        <dd>http://www.atguigu.com
        <dd>
      </dl>
    </div>
  </div>
  <div class="down">
    尚硅谷书城.Copyright ©2023
  </div>
</div>
</div>

<script th:src="@{/script/swiper.min.js}"></script>
<script>
    let swiper = new Swiper('.swiper-container', {
        autoplay: true,
        pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        }
    })
</script>
</body>
</html>
